<template>
<view class="page">
	<template v-if="loadingState.default">
		<loading :loadingState="loadingState"></loading>
	</template>
	<template v-else>
		<template v-if="list.length>0">
			<view class="list-wrap">				
				<navigator open-type="navigate" :url="'/package_shop/detail/detail?id='+item.goods_id" hover-class="none" class="item" v-for="(item,index) in list" :key="index">
					<view class="pic">
						<image :src="item.original_img" mode="widthFix"></image>
					</view>
					<view class="title split-line">{{item.goods_name}}</view>
					<view class="info">
						<view class="price"><i>￥</i><strong>{{item.shop_price}}</strong></view>
						<view class="sell-num">已售出{{item.sales_sum}}件</view>
					</view>
				</navigator> 					
			</view> 
			<loading :loadingState="loadingState"></loading>
		</template>
		<template v-else>
			<empty></empty>
		</template>
	</template>
	
</view>
</template>

<script> 
import loading from '@/components/loading-more.vue'
import empty from '@/components/empty.vue'
import {img_path} from '@/config.js'
export default{
	name:'demo',
	data(){
		return{ 
			isLogin:false,
			loadingState:{
				default:true,
				loading:false,
				completed:false
			},
			type:'0',    
			page:1,
			total:0,
			list:[],
			img_path:img_path
		}
	},
	async onShow() {
		
	},
	async onLoad(params) {
		this.getGoodsList(); 
	},
	onReachBottom(){
		if(this.loadingState.completed){
			this.page=1;
			return false
		}else{
			if(this.list.length<this.total&&this.list.length>0){
				this.page++;
				this.getGoodsList();  
			} 
		}	 
	},
	methods:{
		 
		getGoodsList:async function(){
			console.log('shop')
			let res=await this.$api.shop_api.goodsList({
				p:this.page
			})
			if(res.data){
				this.list=this.list.concat(res.data.list);
				this.total=res.data.count;
				this.loadingState.default=false;
				this.loadingState.loading=true;
				if(this.list.length==res.data.count){
					this.loadingState.default=false;
					this.loadingState.loading=false;
					this.loadingState.completed=true;
				}
			}
		} 
		
	},
	computed:{
		 
		
	},
	watch:{
		 
	},
	components:{
		loading,
		empty
	}
}
</script>

<style scoped lang="less">
	.list-wrap{ 
		display: flex;
		flex-wrap: wrap;
		padding:20rpx 1% 10rpx;
		.item{ 
			width: 48%;
			margin:0 1% 20rpx;  
			background:#fff;
			border-radius: 15rpx;
			overflow: hidden;
			.pic{
				width: 100%;
				image{
					width: 100%;
				}
			}
			.title{
				padding:0 10rpx;
				margin:20rpx 0;
				font-size: 28rpx;
			}
			.info{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:0 10rpx;
				margin-bottom: 10rpx;
				.price{ 
					i{
						font-size: 24rpx;
						font-style: initial;
					}
					font-size: 32rpx;
					color:#f00;
				}
				.sell-num{
					font-size:24rpx;
					color:#999;					 
				}
			}
		}
	}
	
	.buy-btn{ 
		display: flex;
		justify-content: center;
	}
</style>
